<template>
    <div>
        <a-button-group style="margin-bottom: 5px;">
            <a-button class="abutton" @click="addParams">
                <i class="iconjia iconfont"></i>
            </a-button>
            <a-button class="abutton" @click="delParams">
                <i class="icontrash iconfont"></i>
            </a-button>
        </a-button-group>
        <a-table
            :dataSource="params"
            :pagination="false"
            :rowSelection="receiveRowSelection"
            rowKey="idx_"
            :columns="columns"
            :bordered="true"
        >
            <span slot="labelTitle"><span style="color: red;" >*</span>{{$comi18('rxDialog.paramName', '参数名称')}}</span>
            <span slot="valueTitle"><span style="color: red;" >*</span>{{i18n('form.paramAlias','参数别名')}}</span>
            <template slot="label" slot-scope="text, record,index">
                <a-input v-model.trim="record.label"></a-input>
            </template>
            <template slot="value" slot-scope="text, record,index">
                <a-input v-model.trim="record.value" @blur="valueChange(record)"></a-input>
            </template>
        </a-table>
    </div>
</template>

<script>
import {Util,GridMixin} from "@lowcode/jpaas-common-lib";

export default {
    name: "paramConfigDef",
    mixins:[GridMixin],
    props: ["paramConfig"],
    data() {
        return {
            columns:[
                {
                    dataIndex: 'label',
                    key: 'label',
                    slots: { title: 'labelTitle' },
                    scopedSlots: { customRender: 'label' },
                },
                {
                    dataIndex: 'value',
                    key: 'value',
                    slots: { title: 'valueTitle' },
                    scopedSlots: { customRender: 'value' }
                },
            ],
            params:[],
            selectedRowKeys:[]
        }
    },
    computed: {
        receiveRowSelection() {
            return {
                selectedRowKeys: this.selectedRowKeys,
                onChange: this.onSelectChange,
            }
        },
    },
    created() {
        if(this.paramConfig){
            this.params=JSON.parse(this.paramConfig);
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formComponent", key);
        },
        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys
        },
        addParams(){
            this.params.push({
                idx_: Util.randomId(),
                label:"",
                value:""
            })
        },
        delParams(){
            this.removeRows(this.params, this.selectedRowKeys)
        },
        valueChange(record){
            var param=this.params.find(item=>{
                if(item.idx_!= record.idx_ &&  item.value==record.value){
                    return true;
                }
                return false;
            })
            if(param){
                this.$notification.warning({ message: this.$ti18('rxMsa.tipsInfo','提示信息'), description: this.i18n('list.paramIdentify','参数标识') +'【'+record.value+'】' + this.i18n('msg.alreadyExists','已存在!'),duration: 2 });
                record.value="";
            }
        }
    },
    watch: {
        params:{
            handler:function(val) {
                this.$emit('setParams',val)
            },
            deep:true
        }
    }
}
</script>

<style scoped>

</style>